import React, { memo, useEffect, useState } from 'react';
import { Modal } from 'antd';
import VideoControl from '@jd/jd-bsplayer';
import { FullscreenExitOutlined } from '@ant-design/icons';
import styled from './index.less';

function CustomModal({ url, visible, onCancel, zoomConfig, detailsTextStyle }) {
  const { zoomWidth, zoomHeight, comPosition } = zoomConfig;
  const { type, xPosition, yPosition } = comPosition;
  const [modalStyle, setModalStyle] = useState({});
  const [modalWH, setModalWH] = useState({});
  const [ready, setready] = useState(false);

  const modalBodyStyle = {
    width: `${zoomWidth}px`,
    height: `${zoomHeight}px`,
    padding: '0px',
  };

  useEffect(() => {
    const screenModalDiv = document.getElementById('screenModal');
    if (!screenModalDiv) {
      const screenModalContainer = document.createElement('div');
      screenModalContainer.id = 'screenModalDiv';
      screenModalContainer.setAttribute('style', 'position: absolute');
      const modalParent = document.querySelector('.uc-flow-panel') || document.body;
      modalParent.appendChild(screenModalContainer);
      setready(true);
    }
  }, []);

  useEffect(() => {
    if (type === 'custom') {
      setModalWH({ width: '100%' });
      setModalStyle({
        left: `${xPosition}px`,
        top: `${yPosition}px`,
        maxWidth: 'none',
      });
    } else {
      setModalWH({ width: `${zoomWidth}px`, height: `${zoomHeight}px` });
      setModalStyle({});
    }
  }, [type, xPosition, yPosition]);

  return ready ? (
    <Modal
      {...modalWH}
      style={modalStyle}
      bodyStyle={modalBodyStyle}
      wrapClassName={styled['custom-modal-box']}
      getContainer={document.getElementById('screenModalDiv')}
      onCancel={onCancel}
      visible={visible}
      footer={null}
      title={null}
      closable={false}
    >
      <VideoControl key={`${url}_key`} urls={[url]} showDefBg showToolBar={false}></VideoControl>
      <div className={styled['video-details']} style={{ width: `${zoomWidth}px` }}>
        <span onClick={onCancel} style={detailsTextStyle}>
          关闭详情
          <FullscreenExitOutlined />
        </span>
      </div>
    </Modal>
  ) : null;
}
export default memo(CustomModal);
